<!-- 最简单的弹出框 -->
<template>
    <div>
        <el-dialog
            :title="title"
            :visible="true"
            :width="dialogWidth + 'px'"
            :before-close="dialogClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :modal="modal == true ? false : true"
            :append-to-body="true"
        >
            <slot></slot>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'customDialog',
    props: {
        zIndex: {
            type: Number
        },
        /** 标题 */
        title: {
            type: String,
            require
        },
        modal: {
            type: Boolean
        },
        // 尺寸：
        size: {
            // mini = 360,
            // tiny = 540,
            // small = 720,
            // large = 1080,
            // max = 1280,
            // fullscreen = window.screen.width
            type: String,
            require
        }
    },
    computed: {
        dialogWidth() {
            let dWidth = 360
            if (this.size == 'mini') dWidth = 360
            if (this.size == 'tiny') dWidth = 540
            if (this.size == 'small') dWidth = 720
            if (this.size == 'smallLarge') dWidth = 850
            if (this.size == 'large') dWidth = 1080
            if (this.size == 'max') dWidth = 1280
            if (this.size == 'fullscreen') dWidth = window.screen.width
            return dWidth
        }
    },
    methods: {
        /** 关闭弹窗 */
        dialogClose() {
            this.$emit('dialogClose', 'close')
        },
        /** 确定弹窗 */
        dialogSure() {
            this.$emit('dialogSure', 'ok')
        }
    }
}
</script>

<style></style>
